<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- id为app的div为vue的实例作用范围 -->
    <div id="app">
      这里我们使用mustach语法【双大括号语法】来展示数据 <hr/>
      <p> {{ msg }} </p>
    </div>
  </body>
  <!-- todo1 引入vue.js的库 -->
  <script src="../../lib/vue.global.js"></script>
  <script>
    // 这里书写vue的代码
    // console.log(Vue)
    // options {key:value}
    // mount 是规定一个vue的作用范围
    // Vue.createApp(options).mount(cssSelector)
    Vue.createApp({
      // 学会定义数据  
      data () { // data是一个函数，并且它的返回值是一个对象
        return {
          // 这里写数据
          msg: 'Welcome to Vue3',
          shops: []
        }
      }
    }).mount("#app");
  </script>
</html>
